<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 在Web布局中，很多时候会对列做均分布局，
    最为常见的就是在移动端的底部Bar，比如下图这样的一个效果 -->
    <!-- 1.最开始之前 -->
    
<!-- HTML -->
        <!-- <container>
            <column></column>
            <column></column>
            <column></column>
        </container>

         CCSS 
        .container {
            inline-size: 50vw;
            min-inline-size: 320px;
            display: flex-row;
        }

        .column {
            float: left;
            width: calc(100% / 3);
        } -->
    <!-- 2.flex布局 -->
    <!-- HTML -->
    <!-- <flex__container>
        <flex__item></flex__item>
        <flex__item></flex__item>
        <flex__item></flex__item>
    </flex__container>

    CSS 
    .flex__container {
        inline-size: 50vw;
        display: flex;
    }

    .flex__item {
        flex: 1;
    } -->
    <!-- 3Grid布局 -->
    <!-- <grid__container>
        <grid__item></grid__item>
        <grid__item></grid__item>
        <grid__item></grid__item>
    </grid__container>
    
     CSS 
    .grid__container {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /*这里的3表示具体的列数*/
    } -->

    <!-- 问题？
    这样的布局方式也适用于其他的布局中。但不管是Flexbox还是Grid布局中，
    都存在一定的缺陷，当容器没有足够的空间容纳Flex项目（或Grid项目）时
    ，Flex项目或Grid项目会溢出（或隐藏，
    如果Flex容器或Grid容器显式设置了 overflow:hidden）： -->
    <!-- 解决？
    修复这种现象最简单的方式是在Flex容器或Grid容器显式设置一个 
    min-width（或 min-inline-size）：
    .flex__container {
        min-inline-size: 300px;
    } -->


    <!-- 其中还有flex_item中：
        .flex__item {
            flex: 0 0 400px;
        }

        .flex__item {
            flex: 1 0 400px;
        } -->

</body>
</html>